<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  placeholder: String,
  required: Boolean,
  name: String,
});

const emit = defineEmits(['validate']);

const value = ref('');
const errorMessage = ref('');

const validate = () => {
  if (props.required && !value.value) {
    errorMessage.value = '必填项';
    emit('validate', false);
  } else {
    errorMessage.value = '';
    emit('validate', true, props.name, value.value);
  }
};
</script>

<template>
  <div>
    <textarea v-model="value" :placeholder="placeholder" @blur="validate"></textarea>
    <span>{{ errorMessage }}</span>
  </div>
</template>


